<template>
  <div class="ChatPage" :style="faceSize">
    <div v-if="config.window==='minimum'" class="min-header">
      <span>在线咨询</span>
    </div>
    <div v-if="config.window==='normal'" class="header">
      <JwChat-item :config="config" @click="bindClick" />
      <slot name="header" />
    </div>
    <div class="main">
      <div class="chatBox">
        <JwChat
          ref="jwchat"
          :showInputBox="showInputBox"
          :taleList="taleList"
          @enter="enter"
          @sendManualServiceItem="sendManualServiceItem"
          v-model="msg"
          :toolConfig="toolConfig"
          :scrollType="scrollType"
          :width="chatWidth"
          :height="chatHeight"
          :config="chatConfig"
          @clickTalk="$emit('clickTalk',$event)"
        >
          <slot name="tools" slot="tools" />
        </JwChat>
      </div>
      <div class="rightBox" v-if="showRightBox">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "JwChat-index",
  props: {
    config: {
      type: Object,
      default: () => ({
        window:'normal', // 聊天窗口大小. normal: 普通窗口; minimum: 迷你窗
        img: 'image/cover.png',
        name: 'JwChat',
        dept: '最简单、最便捷',
        callback: () => { }
      })
    },
    showRightBox: {
      type: Boolean,
      default: true
    },
    showInputBox: {
      type: Boolean,
      default: true
    },
    taleList: {
      type: Array,
      default: () => {
        return []
      }
    },
    height: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: null
    },
    value: {
      default: ''
    },
    toolConfig: {
      type: Object
    },
    scrollType: {
      default: "noroll"
    },
  },
  data () {
    return {
      chatHeight: '',
      chatWidth: '',
      msg: ''
    }
  },
  computed: {
    faceSize () {
      let height = this.heightConfig;
      let width = this.widthConfig;
      if (height.match(/\d$/)) {
        height += 'px'
      }
      if (width.match(/\d$/)) {
        width += 'px'
      }
      if(this.showInputBox){
        return { height, width };
      }
      // 没有输入框时不设置高度
      else {
        return { width };
      }
    },
    chatConfig () {
      const { historyConfig = {}, window = 'minimum' } = this.config || {};
      return { historyConfig, window }
    },
    widthConfig () {
      const defaultValue = this.config.window === 'minimum' ? '350' : '750';
      return this.width ? this.width : defaultValue;
    },
    heightConfig () {
      const defaultValue = this.config.window === 'minimum' ? 'auto' : '570';
      return this.height ? this.height : defaultValue;
    },
  },
  watch: {
    height: {
      handler () {
        this.chatHeight = this.heightConfig - 60 + ''
      },
      immediate: true
    },
    width: {
      handler () {
        const width = this.showRightBox ? this.widthConfig * .7:this.widthConfig;
        this.chatWidth = width + ''
      },
      immediate: true
    },
    value: {
      handler () {
        this.msg = this.value;
      },
      immediate: true
    },
    msg: {
      handler () {
        this.$emit('input', this.msg);
      },
      immediate: true
    }
  },
  methods: {
    triggerUploadChange(type, data){
      this.$refs.jwchat.triggerUploadChange(type, data);
    },
    sendManualServiceItem(data){
      this.$emit('sendManualServiceItem', data);
    },
    triggerLoading(data){
      this.$refs.jwchat.triggerLoading(data);
    },
    bindClick (type) {
      const { callback } = this.config || {}
      if (callback) {
        callback(type)
      }
    },
    enter (msg) {
      this.$emit('enter', msg)
    }
  }
}
</script>

<style  scoped>
.ChatPage {
  margin: 0 auto;
  background: #fff;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
}
.ChatPage .header {
  /*background-color: #409eff;*/
  background-color: #EFF2F6;
  display: flex;
  margin: 0 auto;
  padding-left: 12px;
  align-items: center;
  height: 60px;
  position: relative;
  /*color: #fff;*/
  justify-content: space-between;
  border: solid 1px #e6e6e6;
  color: #000;
}

.min-header {
  background-color: #EFF2F6;
  height: 18px;
  border: solid 1px #e6e6e6;
  font-size: 6px;
  font-weight: bold;
  display: flex;
}

.ChatPage .main {
  display: flex;
  height: calc(100% - 60px);
}
.ChatPage .main .rightBox {
  /*box-shadow: 0 -3px 3px 0 rgba(0, 0, 0, 0.1);*/
  width: 45%;
  overflow: auto;
}
</style>
